import { Input } from 'antd'
import { useState } from 'react'

function Header(props) {

    const { addTodo } = props

    const [text, setText] = useState('')

    const change = (e) => {
        let name = e.target.value
        setText(name)
    }

    const handleEnter = (e) => {
        // console.log(e.target.value)
        if (text.trim().length == 0) {
            alert('输入的内容不能为空')
            return
        }

        // 将newTodo传给App组件
        addTodo({id: Date.now(), name: text, isDone: false})

        //置空
        // e.target.value = ''
        setText('')
    }

    return (
        <div>
            <Input onChange={change} value={text} allowClear placeholder="请输入你的任务名称，按回车键确认" onPressEnter={handleEnter} />
        </div>
    )
}

export default Header